<template>
  <div>
    <Page>
      <div class="contBox h-full">
        <BaseForm>
          <FormItem>
            <Button class="submitBtn" type="primary" @click="onSubmit"
              >提交</Button
            >
          </FormItem>
        </BaseForm>
      </div>
    </Page>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch, onMounted } from 'vue';
import { Page } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { formSchema } from './data/options';
import { queryGet, queryUpdate } from './data/api';
import { message, FormItem, Button } from 'ant-design-vue';
import { useThrottleFn } from '@vueuse/core';

// 抽屉提交
const onSubmit = useThrottleFn(async (values: Record<string, any>) => {
  console.log(values);
  const { valid } = await formApi.validate();
  if (!valid) return;
  let res: any = await queryUpdate({ ...values, aboutId: 1 });
  message.success(res.message);
}, 1000);

onMounted(() => {
  queryGet({ aboutId: 1 }).then((res: any) => {
    formApi.setValues({ ...res.data });
  });
});

// 表单
const [BaseForm, formApi] = useVbenForm({
  showDefaultActions: false,
  wrapperClass: 'pl-60 pr-80 pt-10 pb-10',
  schema: formSchema,
  handleSubmit: onSubmit,
  commonConfig: {
    labelWidth: 160,
    componentProps: {
      class: 'w-full',
    },
  },
});
</script>

<style lang="scss" scoped>
.submitBtn {
  margin-left: 170px;
  padding: 0 25px;
  margin-top: 40px;
}
</style>
